<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>

    <style>
        .myDiv{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }

        .myDiv2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>


</head>

<body>

<div id="app">
    <h3>VUE中可以写表达式:1、{{}} 2、vue的标签</h3>
    1+1:{{1+1}}<br/>
    isOK:{{isOK}}<br/>
    三元运算:{{ isOK==true?'是的':'不是的' }}<br/>
    是否成年:{{age>=18?'成年':'未成年'}}<br/>
    字符串调用js方法 toUpperCase:{{userName.toUpperCase()}}<br/>
    字符串调用js方法 toLowerCase:{{userName.toLowerCase()}}<br/>
    <span style="background-color: coral" v-text="userName.toUpperCase()"></span><br/>

    <div v-bind:class="{'myDiv':isUse,'myDiv2':isUse2}">

    </div>
</div>

</body>

<script>
    const app = Vue.createApp({
        data(){
            return{
                isOK:false,
                age:15,
                userName:'Jack',
                isUse:false,
                isUse2:true

            }
        }
    }).mount('#app')
</script>

</html>